<template>
  <view
    :class="['top-safety', titleClass]"
    :style="{
      height: `${height}px`,
    }"
  >
    <view class="top-safety-title" :style="{ bottom: wxClientRect.bottom }">
      <slot>
        <text :style="{ color: props.color }">{{ props.title }}</text>
      </slot>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  titleClass: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "var(--kui-color-theme)",
  },
});

// 整体组件高度
const height = ref(44);
// 状态栏高度
const statusBarHeight = ref(18);
// 小程序胶囊
const wxClientRect: UniNamespace.GetMenuButtonBoundingClientRectRes = reactive({
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
});

//
const showdowLenght = ref("0em");
onMounted(async () => {
  // 获取状态栏高度
  const sys = uni.getSystemInfoSync();
  statusBarHeight.value = Number(sys.statusBarHeight);
  // height.value = statusBarHeight.value;

  // #ifdef MP-WEIXIN
  // 小程序右上角胶囊位置信息（用于一些自定义导航条布局）
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

  height.value = statusBarHeight.value + menuButtonInfo.height;
  // #endif

  // #ifdef APP
  // 加上状态栏高度
  height.value = statusBarHeight.value + 40;
  // #endif

  showdowLenght.value = props.title.length + "em";
});
</script>
<style lang="scss" scoped>
.top-safety {
  width: 100%;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  font-weight: bold;
  transition: all 0.3s;
  &-title {
    position: absolute;
    left: 40rpx;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 10rpx;
      width: v-bind(showdowLenght);
      height: 10rpx;
      background-color: var(--kui-color-theme);
      opacity: 0.5;
      border-radius: 8rpx;
    }
  }
}
</style>
